<template>
	<view class="main-rich">
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="rgba(38, 202, 211, 0.21)"
			 indicator-active-color="rgba(38, 202, 211,.9)">
				<swiper-item v-for="banner in bannerList" :key="banner.Id">
					<view class="swiper-item">
						<navigator :url="banner.ProUrl">
							<image class="img" :src="banner.ImgUrl" mode=""></image>
						</navigator>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<u-parse :content="article" @preview="preview" @navigate="navigate" @imageProp="imageProp" @loading="loading"/>
		</view>

		<view class="footer">

		</view>
		<!-- <uFab
            :pattern="pattern"
            :content="content"
            :horizontal="horizontal"
            :vertical="vertical"
            :direction="direction"
            @trigger="trigger"
        ></uFab> -->
	</view>
</template>

<script>
	import uParse from '@/components/richtext-parse/u-parse.vue'
	import uFab from '@/components/uni-fab/uni-fab.vue'
	import communityApi from '@/api/swiper/index.js'
	export default {
		components: {
			uParse,uFab
		},
		data() {
			return {
				bannerList: [],
				article: '',
				loading:true,
				imageProp:{
					mode:'aspectFill',
					padding:5,
					lazyLoad:true
				}
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				let htmlstr = ['<p>',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 20px;"><strong><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; white-space: pre-wrap; background-color: rgb(255, 255, 255);">清华大学南区食堂及就业指导中心</span></strong></span>',
'</p>',
'<p>',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><br/></span>',
'</p>',
'<p style="text-indent: 2em; line-height: 1.5em;">',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">清华大学南区食堂及就业指导中心项目，是对清华中心校园环境的一次修补更新。项目位于校园南北干道学堂路与东西干道至善路的交叉口，三面临路，一侧面向广场，是校园中心区的一处重要公共空间节点。</span>',
'</p>',
'<p>',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><br/></span>',
'</p>',
'<p>',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><br/></span>',
'</p>',
'<p style="text-align:center">',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><img src="https://res.bestcake.com/act/2019520/wap/wap_06.jpg?v=121" width="414" height="247" title="" alt=""/></span>',
'</p>',
'<p style="text-align: right;">',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 12px;">&nbsp;编辑：jy</span><br/></span>',
'</p>',
'<p>',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 12px;"><br/></span></span>',
'</p>',
'<p>',
'    <span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 12px;"><br/></span></span>',
'</p>',
'<p style="text-indent: 2em;">',
'    <span style="font-size: 12px; color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"><span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">整体设计利用地形东西两侧场地高差，为公众设置了一条具有中式巷道空间意味的室内立体街道，不仅联通了东西两侧高差2m的场地， 实现了建筑各个界面的平层入口，更通过交通组织让建筑底层成为有围墙的开放空间，为来自校园各方向的师生提供公共活动的场所。</span></span><br/></span>',
'</p>',
'<p>',
'    <span style="font-size: 12px; color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"><span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"><br/></span></span></span>',
'</p>',
'<p style="text-align:center">',
'    <a href="http://m.bestcake.com/act/2019-item-520?back=1" target="_self"><span style="font-size: 12px; color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"><span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"><img src="https://res.bestcake.com/act/2019520/wap/wap_17.jpg?v=121" width="414" height="329" title="" alt=""/></span></span></span></a>',
'</p>',
'<p style="text-align: right;">',
'    <span style="font-size: 12px; color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"><span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 12px; text-align: right; white-space: pre-wrap; background-color: rgb(255, 255, 255);">编辑：jy</span></span></span></span>',
'</p>',
'<p style="text-align: right;">',
'    <br/>',
'</p>',
'<p>',
'    <strong><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; white-space: pre-wrap; background-color: rgb(255, 255, 255); font-size: 18px;">精心延续的场地环境文脉</span></strong>',
'</p>',
'<p>',
'    <strong><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; white-space: pre-wrap; background-color: rgb(255, 255, 255); font-size: 18px;"><br/></span></strong>',
'</p>',
'<p style="text-indent: 2em;">',
'    <span style="font-size: 12px; color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;"><span style="color: rgb(34, 34, 34); white-space: pre-wrap; background-color: rgb(255, 255, 255); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;"><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: Consolas, &quot;Lucida Console&quot;, &quot;Courier New&quot;, monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">场地内的原始地形、西北角标志性的绿化草坡、东南角的悬铃木都在建筑和场地设计中作为文脉的延续被保留和尊重。为保留东南角的悬铃木，建筑在体型上做了退让处理， 在首层设置树下咖啡平台，在二三层设置观景阳台， 让人们更好的享受保留的绿色校园的怡人环境。 </span></span></span></span>',
'</p>',
'<p style="text-indent: 2em;">',
'    <br/>',
'</p>',
'<p style="text-align:center"></p>',
'<p style="text-indent: 2em;">',
'    <br/>',
'</p>'].join("");
				this.article = htmlstr

				communityApi.getSwiperList('1', (list) => {

					this.bannerList = list
				})
			},
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				uni.navigateTo({
					url: '../../pages/tabBar/user',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			jumpto(){
				uni.navigateTo({
					url: '../../pages/tabBar/user',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	ul,
	li,
	p {
		padding: 0;
		margin: 0;
	}

	ul li {
		list-style: none;
	}

	.main-rich {
		width: 94%;
		height: 100%;
		padding: 0 3%;

		.swiper {
			padding-bottom:10upx;
			swiper {
				height: 380upx;
				background: #fff;
			}
		}

		.img {
			width: 100%;
		}
		.content{
			padding-top: 40upx;
		}
	}
</style>
